<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>renren-aui</title>
  <link rel="stylesheet" href="../../aui/plugins/ionicons-4.3.0/css/ionicons.min.css">
  <link rel="stylesheet" href="../../aui/css/element-theme/index.css">
  <link rel="stylesheet" href="../../aui/css/aui.css">
</head>
<body>
  <div v-cloak class="aui-wrapper aui-page__list-basic">
    <div class="aui-content__wrapper">
      <main class="aui-content">
        <el-card shadow="never" class="base-header">
          <el-row>
            <el-col :span="8">
              <div class="basic-header__info">
                <span class="basic-header__info-key">我的待办</span>
                <p class="basic-header__info-value">8个任务</p>
                <em class="basic-header__info-line"></em>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic-header__info">
                <span class="basic-header__info-key">本周任务平均处理时间</span>
                <p class="basic-header__info-value">32分钟</p>
                <em class="basic-header__info-line"></em>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic-header__info">
                <span class="basic-header__info-key">本周完成任务数</span>
                <p class="basic-header__info-value">24个任务</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="never" class="basic-content">
          <div slot="header" class="clearfix">
            <span class="aui-card__title">标准列表</span>
            <div class="basic-content-extra">
              <el-radio-group size="medium">
                <el-radio-button label="全部" ></el-radio-button>
                <el-radio-button label="进行中"></el-radio-button>
                <el-radio-button label="等待中"></el-radio-button>
              </el-radio-group>
              <el-input
                placeholder="请输入内容"
               
                size="medium">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </div>
          </div>
          <el-button class="aui-button--dashed aui-button--dashed-add" size="small"><i class="icon ion-ios-add"></i>添加</el-button>
          <div class="basic-list">
            <div class="basic-list-item" v-for="(item, index) in dataList">
              <div class="basic-list-item__meta">
                <div class="basic-list-item__meta-avatar">
                  <img :src="item.logo" alt="">
                </div>
                <div class="basic-list-item__meta-content">
                  <h4 class="basic-list-item__meta-title">
                    <a :href="item.href">{{ item.title }}</a>
                  </h4>
                  <div class="basic-list-item__meta-description">{{ item.description }}</div>
                </div>
              </div>
              <div class="basic-list-item__content">
                <div class="basic-list-item__content-list">
                  <div class="basic-list-item__content-item">
                    <span>Owner</span>
                    <p>{{ item.user }}</p>
                  </div>
                  <div class="basic-list-item__content-item">
                    <span>开始时间</span>
                    <p>{{ item.updateDate }}</p>
                  </div>
                  <div class="basic-list-item__content-item">
                    <el-progress :percentage="(index + 2) * 10"></el-progress>
                  </div>
                </div>
              </div>
              <ul class="basic-list-item__action">
                <li><a href="javascript:;">编辑</a></li>
                <li>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      <a href="javascript:;">更多<i class="el-icon-arrow-down el-icon--right"></i></a>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>编辑</el-dropdown-item>
                      <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
              </ul>
            </div>
          </div>
          <el-pagination
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </el-card>
      </main>
    </div>
  </div>
  <script src="../../aui/plugins/vue-2.5.17/vue.js"></script>
  <script src="../../aui/plugins/element-2.4.5/index.js"></script>
  <script src="../../aui/plugins/axios-0.18.0/axios.min.js"></script>
  <script>
    (function () {
      var vm = window.vm = new Vue({
        el: '.aui-wrapper',
        data: function () {
          return {
            dataList: [
              {
                id: 'xxx1',
                title: 'Angular',
                logo: '../../aui/img/avatar.png',
                description: '那是一种内在的东西，他们到达不了，也无法触及的',
                updateDate: '2018-08-17 13:39',
                member: '科学搬砖组',
                href: 'javascript:;',
                memberLink: '',
              },
              {
                id: 'xxx2',
                title: 'Bootstrap',
                logo: '../../aui/img/avatar.png',
                description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
                updateDate: '2018-08-17 13:39',
                member: '全组都是吴彦祖',
                href: 'javascript:;',
                memberLink: '',
              },
              {
                id: 'xxx3',
                title: 'React',
                logo: '../../aui/img/avatar.png',
                description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
                updateDate: '2018-08-17 13:39',
                member: '中二少女团',
                href: 'javascript:;',
                memberLink: '',
              },
              {
                id: 'xxx4',
                title: 'Vue',
                logo: '../../aui/img/avatar.png',
                description: '那时候我只会想自己想要什么，从不想自己拥有什么',
                updateDate: '2018-08-17 13:39',
                member: '程序员日常',
                href: 'javascript:;',
                memberLink: '',
              },
              {
                id: 'xxx5',
                title: 'Webpack',
                logo: '../../aui/img/avatar.png',
                description: '凛冬将至',
                updateDate: '2018-08-17 13:39',
                member: '高逼格设计天团',
                href: 'javascript:;',
                memberLink: '',
              }
            ],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 5,
            dataListLoading: false,
          }
        },
        beforeCreate () {
          vm = this;
        },
        methods: {
        }
      });
    })();
  </script>
</body>
</html>